import React from 'react'
import { connect } from 'dva'
import styles from './tag.less'
import './tag.less'
import Tagmodal from '../../components/tagmodal/tagmodal'
import Tipsmodal from '../../components/tipsmodal/tipsmodal'
import Grid from '../../components/grid/grid'
import Refreshicon from '../../components/refreshIcon/refreshIcon'
import { debounce } from '../../utils/utils'
// import downIcon from '../../assets/image/xl.svg'

// import { CSSTransition } from 'react-transition-group'

class Tag extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      currentUserId: undefined,
      tipsVisible: false
    }
    // this.doSearch = debounce(this.doSearch, 100)
    this.doChangeUser = debounce(this.doChangeUser, 500)
  }
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'tag/getUserList',
    })
    dispatch({
      type: 'tag/getAllTags',
    })
  }

  handleClose = () => {
    this.setState({
      show: false,
    })
  }
  handleCheckUser = userId => {
    this.setState({
      show: true,
      currentUserId: userId,
    })
  }
  handleCommit = (selectedTagId) => {
    const { dispatch } = this.props
    const { currentUserId } = this.state
    dispatch({
      type:'tag/stickTag',
      payload: {
        userId: currentUserId,
        tagId: selectedTagId,
      }
    })
    this.setState({
      show: false,
      tipsVisible: true
    })
  }

  doSearch(keyword) {
    const { dispatch } = this.props
    dispatch({
      type: 'tag/filterUser',
      payload: {
        keyword,
      },
    })
  }

  handeleSearch = e => {
    const keyword = e.target.value
    const reg = /^\s*$/g
    if (reg.test(keyword) || keyword === null || keyword === '') {
      e.target.value = ''
      this.props.dispatch({
        type: 'tag/clearFilterUser',
      })
      return
    }
    this.doSearch(keyword)
  }

  doChangeUser() {
    const { dispatch } = this.props
    dispatch({
      type: 'tag/getUserList',
    })
  }

  clickFilterUser = user => {
    const { dispatch } = this.props
    this.searchInput.value = user.userName
    this.setState({
      show: true,
      currentUserId: user.userId,
    })
    dispatch({
      type: 'tag/clearFilterUser',
    })
  }

  tipsCancel = () => {
    this.setState({
      tipsVisible: false
    })
  }

  tipsConfirm = () => {
    this.setState({
      tipsVisible: false,
      show: true
    })
  }

  render() {
    const { tipsVisible } = this.state
    const { users, filterUsers } = this.props
    return (
      <div className={styles.tagBox}>
        {/* <img className={styles.downIcon} src={downIcon} alt='' /> */}
        <div className={styles.tucheng}>
          <div className={styles.title}>
            <span>请选择你想贴标签的对象</span>
          </div>
          <div className={styles.userListBox}>
            <Grid data={users} onClick={this.handleCheckUser} />
            <div className={styles.change_btn}>
              <Refreshicon
                content="换一批"
                click={() => { this.doChangeUser() }} />
            </div>
          </div>
          <div  className={styles.searchContainer}>
            <span className={styles.notfound}>没有找到想贴的人？</span>
            <br />
            <div className={styles.selectBox}>
              <div className={` no-swap ${styles.filterUserBox} ${filterUsers.length > 0 ? styles.filterUserBox2 : ''}`}>
                {filterUsers.map(item => {
                  return (
                    <div
                      className={styles.filterUserItem}
                      key={item.userId}
                      onClick={() => {
                        this.clickFilterUser(item)
                      }}
                    >
                      {item.userName}
                    </div>
                  )
                })}
              </div>
              <input
                className={styles.input}
                ref={searchInput => {
                  this.searchInput = searchInput
                }}
                onChange={this.handeleSearch}
                placeholder={'请输入姓名或花名'}
              />
            </div>
          </div>
          <Tagmodal
            data={this.props.tags}
            show={this.state.show}
            commitAction={this.handleCommit}
            closeAction={this.handleClose}
          />

          <Tipsmodal
            visible={tipsVisible}
            cancel={this.tipsCancel}
            confirm={this.tipsConfirm}
            info={'标签发送成功！'}
            confirmText={'继续贴'}
            cancelText={'退出'} />
        </div>
      </div>
    )
  }
}

export default connect(({ tag }) => tag)(Tag)
